<template>
	<view class="all">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="logo">
			<view class="title">
				易读书城
			</view>
			<view class="group">
				<image src="../../static/xiazai.png" mode=""></image>
				<picker @change="bindPickerChange" :value="index" :range="array" class="hand">
					<view class="picker">
						当前选择：{{array[index]}}
					</view>
				</picker>
			</view>
		</view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="https://mibook-1251592799.file.myqcloud.com/cover_img/b84567348eabda97cebd5d822a7c95f0"
						mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://mibook-1251592799.file.myqcloud.com/img/96a33442ad75990e6c38d32a4854411c"
						mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://mibook-1251592799.file.myqcloud.com/img/4c4378797b7402c6aa78746c1155879f"
						mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://mibook-1251592799.file.myqcloud.com/img/fac571b51ec073027c8f4079e00414e6"
						mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view>
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="jump(listIndex,num)">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<u-skeleton :loading="loading" rows="10" title :animate="true"></u-skeleton>
		<view class="sm_nav" v-for="(item,index) in emo" :key="index">
			<view class="tody">
				<view class="title_t">
					{{item.title}}
				</view>
				<view class="more" @click="jum(item.mcid)">
					查看更多
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 今日必读 循环遍历 -->
			<view class="dps" style="display: flex;overflow: auto;">
				<view class="list" style="width: 20%;margin-left:20rpx;" v-for="(items,i) in item.bookList" :key="i"
					@click="pop(items.sourceId)">
					<view class="cupe" v-if="item.title=='今日必读'">
						<image :src="items.coverUrl" mode=""></image>
						<view class="cupe_title">
							{{items.title}}
						</view>
						<view class="author">
							{{items.authorName}}
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-for="(items,i) in item.bookList" :key="i" @click="pop(items.sourceId)">
				<view class="list_book" v-if="item.title!='今日必读'">
					<image :src="items.coverUrl">
					</image>
					<view class="list_book_right">
						<view class="list_book_title">
							{{items.title}}
						</view>
						<u--text :lines="2" line-height="20px" size="12" color="rgba(46,46,46,.5)" :text="items.intro">
						</u--text>
						<view class="list_book_i">
							<text class="names">{{items.authorName}}</text>
							<view class="cupe_t">
								<text class="names_t">{{items.allWords | words}}</text>
								<text class="names_c">{{items.categoryName}}</text>
								<text class="names_c"
									:style="items.status == 30 ? 'color:#ff9d4a;':'color:#11b4ff;'">{{items.status==30?"连载":'完结'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<footNav></footNav>
	</view>
</template>

<script>
	import footNav from "../../components/footNav.vue"
	export default {
		components: {
			footNav
		},
		data() {
			return {
				list: [{
						name: 'photo',
						title: '榜单'
					},
					{
						name: 'lock',
						title: '完结'
					},
					{
						name: 'star',
						title: '免费'
					},
					{
						name: 'hourglass',
						title: '新书'
					},
					{
						name: 'home',
						title: '分类'
					},
				],
				emo: "",
				loading: true,
				num: 1,
				index: 0,
				array: ['男生版', '女生版']
			}
		},
		filters: {
			words(value) {
				return Math.floor(value / 10000) + "万字"
			}

		},
		methods: {
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			jum(i) {
				console.log(i, 123456)
				uni.navigateTo({
					url: '/pages/detail/detail?mcid=' + i
				})
			},
			pop(id) {
				uni.navigateTo({
					url: '/pages/books/books?sourceId=' + id
				})
			},
			jump(id, num) {
				var ids = id
				var nums = num
				if (ids == 0) {
					uni.navigateTo({
						url: '/pages/billboard/billboard?nums=' + nums
					})
				} else if (ids == 1) {
					uni.navigateTo({
						url: '/pages/end/end?nums=' + nums
					})
				} else if (ids == 2) {
					uni.showToast({
						title: '暂无内容',
						icon: 'none'
					})
				} else if (ids == 3) {
					uni.navigateTo({
						url: "/pages/newbook/newbook"
					})
				} else if (ids == 4) {
					uni.navigateTo({
						url: "../classification/classification"
					})
				}
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				this.num = Number(this.index) + 1
				this.getValue()
			},
			getValue() {
				uni.$http.get('https://m.taoyuewenhua.com/ajax/book_mall?ctype='+this.num+'&seed=5793').then(res => {
					this.emo = res.data.data.channelList
					this.loading = false
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onLoad() {
			this.getValue()
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.logo {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		.title {
			font-size: 32rpx;
		}

		.group {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			select {
				border: 0;
				outline: 0;
			}

		}

	}

	.swiper {
		height: 284rpx;

		image {
			display: block;
			width: 100%;
			height: 284rpx !important;
		}
	}

	.grid-text {
		font-size: 14px;
		color: #000;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */

	}

	.tody {
		height: 110rpx;
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title_t {
			font-size: 32rpx;
			font-weight: bolder;
			position: relative;
			margin: 0 14rpx 0 10rpx;

			&::before {
				content: "";
				width: 6rpx;
				height: 70%;
				position: absolute;
				left: -16rpx;
				top: 6rpx;
				background-color: #ffbb1b;
			}
		}

		.more {
			display: flex;
			color: #2e2e2e;
			opacity: .5;
			font-size: 28rpx;
		}
	}

	.list {
		// display: flex;

		.cupe {
			image {
				width: 150rpx;
				height: 200rpx;
			}

			.cupe_title {
				font-size: 24rpx;
				color: #2e2e2e;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.author {
				font-size: 24rpx;
				color: #2e2e2e;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				opacity: .5;
			}
		}
	}

	.list_book {
		display: flex;
		padding: 30rpx 30rpx 30rpx;
		border-bottom: 2rpx solid #ededed;

		&:nth-of-type(1) {
			padding-top: 0;
		}

		image {
			width: 150rpx;
			height: 200rpx;
			padding-right: 20rpx;
		}

		.list_book_right {
			width: 75%;
			display: flex;
			flex-direction: column;

			.list_book_title {
				color: 2e2e2e;
				font-size: 26rpx;
				font-weight: bolder;
				margin-bottom: 22rpx;
			}

			.list_book_i {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.names {
					font-size: 24rpx;
					color: rgba(46, 46, 46, .5);
				}

				.cupe_t {
					display: flex;

					.names_t {
						text-align: center;
						margin-right: 10rpx;
						padding: 0 12rpx;
						background-color: #f6f6f6;
						font-size: 24rpx;
						color: rgba(46, 46, 46, .5);
					}

					.names_c {
						text-align: center;
						margin-right: 10rpx;
						padding: 0 12rpx;
						background-color: #f6f6f6;
						font-size: 24rpx;
						color: rgba(46, 46, 46, .5);
					}
				}
			}
		}
	}
</style>
